<template>
    <div class="chatView">
        <div class="translateContainer">
            <div v-for="(item, index) in chatInfos" :key="item.id" class="chatItem">
                <component
                    :is="item.type"
                    :message="item.content"
                    :avatar="item.avatar"
                    :message_type="item.message_type"
                    :media_url="item.media_url"
                    :media_size="item.media_size"
                    :duration="item.duration"
                    :preview_url="item.preview_url"
                    :file_width="item.file_width"
                    :file_height="item.file_height"
                    v-if="defer(index)"
                />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
import { useDefer } from '@/utils/render'
import { chatInfo } from '@/api/messages/type'

const defer = useDefer()
defineProps({
    chatInfos: {
        type: Object as PropType<chatInfo[]>,
        required: true,
    },
})
</script>

<style scoped lang="scss">
.chatView {
    height: calc(100vh - $base-tabbar-height - $base-function-height);
    border-bottom: 2px solid rgb(214, 214, 214);

    .translateContainer {
        height: auto;
        max-height: calc(100vh - $base-tabbar-height - $base-function-height);
        overflow-x: hidden;
        overflow-y: auto;
        @include flex-layout(flex, normal, normal, nowrap, column-reverse);

        &.flod {
            width: calc(100vw - $base-menu-min-width - 2px);
        }
    }
}
</style>
